/**
* @Description: WoShop商城
* @Author: 梧桐
* @Copyright: 武汉一一零七科技有限公司©版权所有
* @Link: www.wo-shop.net
* @Contact: QQ:2487937004
*/
<template>
  <view class="page">
    <!--关注列表 -->
    <view class="nullBox" v-if="reverseItem.length==0">
      <image :src="imgStaticUrl+'images/img-nullStatus.png'" mode="widthFix"></image>
      <view>{{$t('暂未绑定子账号')}}</view>
    </view>
    <uni-collapse accordion="true">
      <uni-collapse-item :title="$t('客服')+'：'+item.user_name" v-for="(item, index) in reverseItem" :key="index" :show-animation="true">
        <view class="content">
          <view>
            <span class="con-name">{{$t('手机号')}}:</span>
            {{item.phone}}
			<u-button shape="circle" class="con-unbind " type="error" size="mini" plain @click="deleteCustomerService(item.id)">{{$t('解绑')}}</u-button>
          </view>
          <view>
            <span class="con-name">{{$t('用户名')}}:</span>
            {{item.user_name}}
          </view>
        </view>
      </uni-collapse-item>
    </uni-collapse>
    
    
    <u-button shape="circle" class="person-button " type="warning" size="medium" plain @click="navigateTo('/pagesB/seller/addSonAccount')">{{$t('添加子账号')}}</u-button>
  
  </view>
</template>

<script>
// import { uniCollapse, uniCollapseItem } from "@dcloudio/uni-ui";


import {
  setTimeout
} from 'timers';
export default {
  data() {
    return {
      imgStaticUrl: this.STATICURL,
      tit: "",
      items: [],
      options: [{
        text: this.$t('停用'),
        style: {
          backgroundColor: "#007aff"
        }
      }],
      delSrc: ""
    };
  },
  components: {},
  onShow() {
    this.$loading();
    this.customerServiceList();
  },
  onLoad() {
    this.customerServiceList();
  },
  onPullDownRefresh() {
    this.customerServiceList();
  },
  
  computed: {
    reverseItem() {
      return this.items.reverse();
    }
  },
  
  methods: {
    navigateTo(url) {
      uni.navigateTo({
        url: url
      });
    },
    customerServiceList() {
      this.$http.customerServiceList().then(res => {
        if (res.status == 200) {
          this.items = res.data;
        }
      })
    },
    deleteCustomerService(selfId) {
      this.$http.deleteCustomerService({
        id: selfId
      }).then(res => {
        if (res.status == 200) {
          this.$loading();
          this.items = res.data;
          setTimeout(() => {
			this.$hideLoading();
            this.$toast(res.mess)
          }, 1000)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

.page {
  padding-bottom: 160upx;
  
  .nullBox {
    
    display: flex;
    justify-content: center;
    flex-direction: column;
    color: #999999;
    align-items: center;
    
    image {
      width: 180upx;
      margin: 60upx 0;
    }
  }
  
  .content {
    padding: 30upx;
	background-color: #ffffff;
	border-bottom-style: dashed;
	border-bottom-width: 1rpx;
	border-bottom-color: #d6d3d8;
	border-radius: 10rpx;
    
    view {
      margin-top: 20upx;
      
      .con-name {
        width: 160upx;
        display: inline-block;
        color: #999999;
      }
	  .con-unbind{
		  
	  }
    }
  }
  
  .person-button {
    position: fixed;
    bottom: 30upx;
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    
    .btn {
      border-radius: 200upx;
      color: #ffffff;
    }
  }
}
</style>
